<template>
<div class="edu_statist">
  <div v-for="item in modelOptions" :key="item.label" class="edu_statist_wrap">
    <span class="edu_statist_label">{{ item.label }}</span>
    <div class="progress-wrap" @click="clickEducation(item.label)">
      <div class="progress-val" :style="{ 'background': item.background, 'width': item.percent}"></div>
    </div>
    <span class="edu_statist_num" :style="{color: item.color}">{{ item.value }}人</span>
  </div>

</div>
</template>

<script>
export default {
  name: "educationStatist",
  props: {
    modelOptions: Array,
  },
  methods: {
    clickEducation(eduName) {
      this.$emit('click-edu', eduName)
    },
  }
}
</script>

<style scoped lang="scss">
.edu_statist{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  padding-top: 15px;
  .edu_statist_wrap{
    display: flex;
  }
  .progress-wrap {
    height: 16px;
    flex: 1;
    margin: 0 8px 0 15px;
    background: #f2f2f2;
  }
  .progress-val {
    height: 100%;
  }
  .edu_statist_label {
    display: inline-block;
    width: 55px;
    text-align: right;
  }
  .edu_statist_num {
    width: 55px;
    text-align: right;
  }
}

</style>
